<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <fieldset>
        <legend>我是app</legend>
        <first-com></first-com>
      </fieldset>
    </div>
    <template id="first">
      <div>
        <!-- vue2组件只能有一个根标签 -->
        <fieldset>
          <legend>{{msg}}</legend>
          <child> </child>
        </fieldset>
      </div>
    </template>
    <template id="child">
      <div>
        <fieldset>
          <legend>是{{msg}}</legend>
        </fieldset>
      </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
      //全局组件
      //1、注册组件
      //2、编写组件结构
      //3、展示组件
      Vue.component("first-com", {
        template: "#first",
        //每个组件的都需要有独立的作用域,使用函数可以维护一份被返回对象的独立的拷贝,这样组件之间的值就不会混乱污染(背)
        data() {
          return {
            msg: "这是一个全局组件",
          };
        },
        //局部组件
        components: {
          //key是组件的名字
          //子组件展示名字一定要展示到父组件的模板中
          child: {
            template: "#child",
            data() {
              return {
                msg: "child",
              };
            },
          },
        },
      });
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "app里的组件",
        },
      });
    </script>
  </body>
</html>
